<!DOCTYPE html PUBLIC '-//W3C//DTD Xhtml 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<!-- So we have to use html instead of xul... As a bit of an html noob, lets keep this simple:
     use absolute positioning and the power of z-index to implement tabs  -->
<html>
	<head>
		<title>Options</title>
        <script type='text/javascript' src='../jscolor/jscolor.js'></script>
		<link href='options.css' type='text/css' rel='stylesheet' />
	</head>
	<body id='canw-body'>
        <div id='canw-header'>
            <h2>Options</h2>
        </div>
        <div id='canw-tabWrapper'>
            <div id='canw-tab1' class='tab'>Location</div>
            <div id='canw-tab2' class='tab'>Display</div>
            <div id='canw-tab3' class='tab'>Style</div>
            <div id='canw-tab4' class='tab'>Other</div>
        </div>
        <div id='canw-content1' class='contentWrapper'>
            <label id='canw-provincesLabel'>Select a region:</label>
            <select id='canw-provinces' size='13'>
                <option value='AB'>Alberta</option>
                <option value='BC'>British Columbia</option>
                <option value='MB'>Manitoba</option>
                <option value='NB'>New Brunswick</option>
                <option value='NL'>Newfoundland and Labrador</option>
                <option value='NT'>Northwest Territories</option>
                <option value='NS'>Nova Scotia</option>
                <option value='NU'>Nunavut</option>
                <option value='ON'>Ontario</option>
                <option value='PE'>Prince Edward Island</option>
                <option value='QC'>Quebec</option>
                <option value='SK'>Saskatchewan</option>
                <option value='YT'>Yukon</option>
            </select>
            <label id='canw-sitesLabel'>Select a location:</label>
            <select id='canw-sites' size='13'></select>
        </div>
        <div id='canw-content2' class='contentWrapper'>
            <fieldset id='canw-toolbar'>
                <legend>Toolbar</legend>
                <input id='canw-temperature' type='checkbox' value='temperature' />
                <label for='canw-temperature' class='checkboxLabel'>Temperature</label><br />
                <input id='canw-windChill' type='checkbox' value='windChill' />
                <label for='canw-windChill' class='checkboxLabel'>Wind chill</label><br />
                <input id='canw-humidex' type='checkbox' value='humidex' />
                <label for='canw-humidex' class='checkboxLabel'>Humidex</label><br />
                <input id='canw-condition' type='checkbox' value='condition' />
                <label for='canw-condition' class='checkboxLabel'>Condition</label><br />
            </fieldset>
            <input id='canw-showAllInPanel' type='checkbox' value='showAllInPanel' />
            <label for='canw-showAllInPanel' class='checkboxLabel'>
                Show all current conditions and forecast via left-click on toolbar
            </label><br />
            <input id='canw-warnings' type='checkbox' value='warnings' />
            <label for='canw-warnings' class='checkboxLabel'>
                Automatically show Environment Canada warnings
            </label><br />
            <input id='canw-warningsOnce' class='indent' type='checkbox' value='warningsOnce' />
            <label for='canw-warningsOnce' class='checkboxLabel'>
                Show the same warning only once per session
            </label>
        </div>
        <div id='canw-content3' class='contentWrapper'>
            <fieldset id='canw-font'>
                <legend>Toolbar - Font</legend>
                <input id='canw-bold' type='checkbox' value='bold' />
                <label for='canw-bold' class='checkboxLabel'>Bold</label><br />
                <input id='canw-italic' type='checkbox' value='italic' />
                <label for='canw-italic' class='checkboxLabel'>Italic</label><br />
            </fieldset>
            <fieldset id='canw-color'>
                <legend>Toolbar - Color For Watches/Warnings</legend>
                <div id='canw-colorLeft'>
                    <input id='canw-priorityLow' type='checkbox' value='priorityLow' />
                    <label for='canw-priorityLow' class='checkboxLabel'>Low priority</label><br />
                    <input id='canw-priorityMedium' type='checkbox' value='priorityMedium' />
                    <label for='canw-priorityMedium' class='checkboxLabel'>Medium priority</label><br />
                    <input id='canw-priorityHigh' type='checkbox' value='priorityHigh' />
                    <label for='canw-priorityHigh' class='checkboxLabel'>High priority</label><br />
                    <input id='canw-priorityUrgent' type='checkbox' value='priorityUrgent' />
                    <label for='canw-priorityUrgent' class='checkboxLabel'>Urgent priority</label><br />
                </div>
                <div id='canw-colorRight'>
                    <label for='canw-textColorLow' class='textboxLabel'>
                        Text:
                    </label>
                    <input id='canw-textColorLow' type='text' class='color {hash:true,required:false}' size='7' disabled='true'>
                    <label for='canw-backgroundColorLow' class='textboxLabel'>
                        Background:
                    </label>
                    <input id='canw-backgroundColorLow' type='text' class='color {hash:true,required:false}' size='7' disabled='true'><br />
                    <label for='canw-textColorMedium' class='textboxLabel'>
                        Text:
                    </label>
                    <input id='canw-textColorMedium' type='text' class='color {hash:true,required:false}' size='7' disabled='true'>
                    <label for='canw-backgroundColorMedium' class='textboxLabel'>
                        Background:
                    </label>
                    <input id='canw-backgroundColorMedium' type='text' class='color {hash:true,required:false}' size='7' disabled='true'><br />
                    <label for='canw-textColorHigh' class='textboxLabel'>
                        Text:
                    </label>
                    <input id='canw-textColorHigh' type='text' class='color {hash:true,required:false}' size='7' disabled='true'>
                    <label for='canw-backgroundColorHigh' class='textboxLabel'>
                        Background:
                    </label>
                    <input id='canw-backgroundColorHigh' type='text' class='color {hash:true,required:false}' size='7' disabled='true'><br />
                    <label for='canw-textColorUrgent' class='textboxLabel'>
                        Text:
                    </label>
                    <input id='canw-textColorUrgent' type='text' class='color {hash:true,required:false}' size='7' disabled='true'>
                    <label for='canw-backgroundColorUrgent' class='textboxLabel'>
                        Background:
                    </label>
                    <input id='canw-backgroundColorUrgent' type='text' class='color {hash:true,required:false}' size='7' disabled='true'>
                </div>
            </fieldset>
        </div>
        <div id='canw-content4' class='contentWrapper'>
            <fieldset>
                <legend>Language</legend>
                <input id='canw-english' type='radio' name='language' value='english' checked='true' />
                <label for='canw-english' class='radioLabel'>English</label>
                <input id='canw-french' type='radio' name='language' value='french' />
                <label for='canw-french' class='radioLabel'>French</label>
            </fieldset>
            <fieldset>
                <legend>Check For Updates</legend>
                <label for='canw-minutes' class='textboxLabel'>Minutes (10 - 720):</label>
                <input id='canw-minutes' type='text' maxlength='3' size='3' />
            </fieldset>
        </div>
        <div class='buttonPack'>
            <input id='canw-buttonOk' type='button' value='OK' />
            <input id='canw-buttonCancel' type='button' value='Cancel' />
        </div>
	</body>
</html>